<template>
  <!-- 电梯管理 -- 机构管理 -- 添加机构-->
  <div class="page-operate addOrganization">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="submitForm" class="submit">确定</button>
        <button @click="closeOrganization">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="main-content form-edit">
        <div class="page-form addOrgan-form">
          <el-form :inline="true" class="my-form my-form-600" ref="myForm" :model="myForm"
                   label-width="120px"
                   size="medium">
            <el-form-item label="机构名称:" required>
              <el-input v-model="myForm.name"></el-input>
            </el-form-item>
            <el-form-item label="机构代码:" required>
              <el-input v-model="myForm.code"></el-input>
            </el-form-item>

            <el-form-item label="机构简称:" required>
              <el-input v-model="myForm.shortName"></el-input>
              <p style="width: 500px" class="password-warning">选择所属机构类型后默认继承机构类型权限,可在机构列表中单独设置</p>

            </el-form-item>
            <el-form-item label="机构类型:" required v-if="organId || activeId">
              <el-select v-model="myForm.type" disabled placeholder="请选择">
                <el-option
                  v-for="item in organTypeArr"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>

            <el-form-item label="机构类型:" required v-else>
              <el-select v-model="myForm.type" placeholder="请选择">
                <el-option
                  v-for="item in organTypeArr"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="负责人:" required>
              <el-input v-model="myForm.resName"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话:" required>
              <el-input v-model="myForm.resPhone"></el-input>
            </el-form-item>
            <el-form-item label="机构证书编号:" required>
              <el-input v-model="myForm.qualification"></el-input>
            </el-form-item>
            <el-form-item label="机构地址:" required>
              <el-input v-model="myForm.address"></el-input>
            </el-form-item>
            <el-form-item label="传真:">
              <el-input v-model="myForm.fax"></el-input>
            </el-form-item>
            <el-form-item label="描述:" prop="desc">
              <el-input type="textarea" v-model="myForm.description" class="my-area" placeholder="填写描述信息"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
  .addOrgan-form .el-form {
    display: flex;
    flex-direction: column;
  }
</style>
<script>
  import com from '../../../../js/common'
  import HeadTop from "../../../../components/head-top/head-top"
  import {getOrganDetail, organAdd, organUpdate, organActive, getOrganTypeList} from '@/api/getData'

  export default {
    components: {
      HeadTop
    },
    data() {
      return {
        title: '添加机构',
        organId: 0,              // 修改id
        activeId: 0,              // 激活id
        activeSeqCode: '',      // 激活页面需要传的seqCode
        myForm: {
          name: '',             // 机构名称
          code: '',              // 机构代码
          shortName: '',        // 机构简称
          type: '',               // 机构类型
          resName: '',              // 负责人
          resPhone: '',          // 负责人电话
          qualification: '',         // 机构证书编号
          address: '',           // 地址
          fax: '',
          description: '',         // 描述
        },
        organTypeArr: [],
        disableOrgan: false
      };
    },
    created() {
      // 获取地址栏地址
      const organId = this.$route.query.organId
      const activeId = this.$route.query.activeId
      this.organId = organId
      this.activeId = activeId
      if (organId) {  // 修改
        this.title = "修改机构"
        this.getDetailById(this.organId)
      } else if (activeId) { // 激活
        // 进入到激活
        this.title = "激活机构"   // 标题为"激活机构"
        this.getDetailById(this.activeId)
      }
      this.getOrganTypeData()  	// 机构类型数据获取
    },
    methods: {
      // 获取页面数据(机构类型)
      getOrganTypeData() {
        getOrganTypeList({}).then((data) => {
          // 获取地址栏地址
          const organId = this.$route.query.organId
          const activeId = this.$route.query.activeId
          const currentData = data.data.data    // 获取到的机构类型数据
          if (activeId || organId) {
            this.organTypeArr = currentData    // 获取到的机构类型数据
          } else {
            this.organTypeArr = currentData.filter((val) => {
              return val.value !== 0
            })
          }
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      // 获取详细数据
      getDetailById(id) {
        getOrganDetail({
          id: id
        }).then((data) => this.myForm = data.data.data            // 机构名称
        ).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      // 验证信息
      checkSubmitMsg() {
        // 机构名
        if (this.myForm.name === '') {
          this.$message.warning('请输入机构名')
          return false
        }
        // 机构简称
        if (this.myForm.shortName === '') {
          this.$message.warning('请输入机构简称');
          return false
        }
        // 选择机构
        if (this.myForm.type === '') {
          this.$message.warning('请选择机构')
          return false
        }
        // 负责人姓名
        if (this.myForm.resName === '') {
          this.$message.warning('请填写负责人姓名')
          return false
        }
        // 负责人手机
        if (this.myForm.resPhone === '') {
          this.$message.warning('请填写负责人手机')
          return false
        }
        // 手机号码校验
        if (!/^1[34578]\d{9}$/.test(this.myForm.resPhone)) {
          this.$message.warning('请输入正确手机号码!')
          return false

        }
        // 机构证书编号
        if (this.myForm.qualification === '') {
          this.$message.warning('请填写机构证书编号')
          return false
        }
        // 地址
        if (this.myForm.address === '') {
          this.$message.warning('请输入地址')
          return false
        }

        return true
      },
      // 表单数据提交前的校验
      submitForm() {
        // 判断是否校验通过
        if (!this.checkSubmitMsg()) {
          return
        }
        // 获取地址栏地址
        const organId = this.$route.query.organId
        const activeId = this.$route.query.activeId
        this.organId = organId
        this.activeId = activeId
        if (organId) {  // 修改
          this.eidtOrganization()
        } else if (activeId) { // 激活
          this.activeOrganization()
        } else { // 添加
          this.addOrganization()
        }
      },
      // 添加机构
      addOrganization() {
        organAdd(this.myForm).then((res) => {
          com.mask()
          this.$message.success({
            message: '操作成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.$router.push('/manage/systemMgr/organMgr')
            }
          })
        }).catch((data) => {
          this.$message.error(data.data.message ? data.data.message : '添加失败')
        })
      },
      // 修改
      eidtOrganization() {

        this.myForm.id = this.organId
        organUpdate(this.myForm).then((res) => {
          com.mask()
          this.$message.success({
            message: '操作成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.$router.push('/manage/systemMgr/organMgr')
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      // 激活
      activeOrganization() {
        this.myForm.id = this.activeId
        organActive(this.myForm).then((res) => {
          com.mask()
          this.$message.success({
            message: '操作成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.$router.push('/manage/systemMgr/organMgr')
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      closeOrganization() { // 关闭(机构)按钮
        this.$router.back(-1)  // 返回到上一页
      }
    }
  };
</script>
